<template>
	<view class="main-content">
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-location">
				<image class="location-icon" src="/static/home/address.png" />
				<text class="location">广州天河区</text>
			</view>
			<view class="search-input-wrapper">
				<input class="search-input" type="text" placeholder="搜索附近充电桩" />
				<image class="search-icon" src="/static/home/magnifier.png" />
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper class="banner" autoplay circular >
			<swiper-item v-for="item in picture" :key="item.id">
				<image :src="item.src" class="banner-image"></image>
			</swiper-item>
		</swiper>

		<!-- 功能区域 -->
		<view class="function-section">
			<view class="function-item" v-for="item in functions" :key="item.id"
				:class="{ active: item.id === selectedFunction }" @click="selectFunction(item.id)">
				<image :src="item.icon" class="function-icon"></image>
				<text class="function-text">{{ item.name }}</text>
			</view>
		</view>
		<!-- 功能区域 -->
		<view class="extra-function-section">
			<view class="extra-function-item" v-for="item in extraFunctions" :key="item.id">
				<image :src="item.icon" class="extra-function-icon"></image>
				<text class="extra-function-text">{{ item.name }}</text>
			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { ref } from 'vue';

	// 轮播图数据
	const picture = ref([
		{
			id: 1,
			src: 'https://shop-ce.oss-cn-beijing.aliyuncs.com/1.jpg',
		},
		{
			id: 2,
			src: 'https://shop-ce.oss-cn-beijing.aliyuncs.com/2.jpg',
		},
	]);

	// 功能区按钮数据
	const functions = ref([
		{ id: 1, name: '一键充电', icon: '/static/home/home-function-1.png' },
		{ id: 2, name: '附近充电桩', icon: '/static/home/home-function-2.png' },
		{ id: 3, name: '扫码充电', icon: '/static/home/home-function-3.png' },
	]);
	// 当前选中的功能
	const selectedFunction = ref(1);
	// 选中功能的处理方法
	const selectFunction = (id : number) => {
		selectedFunction.value = id;
	};

	// 辅助功能区按钮数据
	const extraFunctions = ref([
		{ id: 1, name: '积分商城', icon: '/static/home/extra-1.png' },
		{ id: 2, name: '优惠券秒杀', icon: '/static/home/extra-2.png' },
		{ id: 3, name: '充值中心', icon: '/static/home/extra-3.png' },
		{ id: 4, name: '充电记录', icon: '/static/home/extra-4.png' },
	]);
</script>

<style scoped>
	.main-content{
		width: 750rpx;
		height: 100vh;
		background-color:  #F4F4F4;
	}
	/* 搜索框样式 */
	.search-box {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		background-color:  #fff;
		height: 98rpx;
	}

	.search-location {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		margin-right: 30rpx;
	}

	.location-icon {
		width: 30rpx;
		height: 40rpx;
		margin-right: 8rpx;
	}

	.location {
		font-size: 28rpx;
		color: #333;
	}

	.search-input-wrapper {
		position: relative;
		flex: 1;
	}

	.search-input {
		height: 68rpx;
		border: none;
		border-radius: 34rpx;
		background-color: #F4F4F5;
		padding: 0 60rpx 0 20rpx;
		font-size: 28rpx;
	}

	.search-icon {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 36rpx;
		height: 36rpx;
	}

	/* 轮播图样式 */
	.banner image {
		width: 750rpx;
		height: 280rpx;
	}

	/* 功能区样式 */
	.function-section {
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		background-color: #fff;
	}

	.function-item {
		width: 200rpx;
		height: 160rpx;
		background-color: #dbeafe;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.function-icon {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}

	.function-text {
		font-size: 24rpx;
		color: #3b82f6;
	}

	.function-item.active {
		background-color: #3b82f6;
	}

	.function-item.active .function-text {
		color: #fff;
	}

	.function-item.active .function-icon {
		filter: brightness(100);
	}

	/* 功能区域样式 */
	.extra-function-section {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		background-color: #fff;
		margin-top:20rpx ;
	}

	.extra-function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
	}

	.extra-function-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.extra-function-text {
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}
</style>